<template>
	<vCommonPage type="1" title="住院充值">
		<div slot="customContent" style="width: 94%;" class="zycz">
			<div class="CenterBox flex">
				<div class="patientName  texalignL">患者：<span
						class="blue">{{$store.state.user.userinfo.patientName}}</span></div>
				<div class="patientName  texalignL">住院号：<span class="blue">{{$store.state.user.userinfo.idNo}}</span></div>
				<div class="patientName  texalignR">住院预交金金额：<span class="red">{{$store.state.user.userinfo.balance}}</span></div>
			</div>
			<div class="keyBodBox">
				<div class="patientName fontSmall">充值金额</div>
				<div class="flex full">
					<div class="flex1">
						<div class="numberBox">
							<el-button v-for="(item,index) in numberList" :key="'o'+index"
								@click="clickNumBerItem(item,index)"
								:class="item.isClick?'numberBoxItem click':'numberBoxItem' ">
								{{item.name}}
							</el-button>
						</div>
						<div class="patientName fontSmall">其他金额</div>
						<input class="inputStyle" v-model="addNumber" placeholder="请输入金额" />
					</div>
					<div class="flex1">
						<div class="NumbersBox">
							<el-button class="number" @click="clickNumber(item)" v-for="(item,index) in numbersList"
								:key="'o'+index">{{item.name}}</el-button>
						</div>
					</div>
				</div>
			</div>
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<div v-if="tipText" class="yiny"
				@click="closeYinying()"></div>
			<div class="bottomBox" style="justify-content: space-between;">
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				<el-button type="primary" class="BtnTextGreen" @click="makeSure()">确定</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	export default {
		name: "mzgh",
		data() {
			return {
				numberList: [{
						name: 100,
						value: 100,
						isClick: false
					},
					{
						name: 200,
						value: 200,
						isClick: false
					},
					{
						name: 300,
						value: 300,
						isClick: false
					},
					{
						name: 500,
						value: 500,
						isClick: false
					}, {
						name: 800,
						value: 800,
						isClick: false
					},
					{
						name: 1000,
						value: 1000,
						isClick: false
					}
				],
				numbersList: [{
						name: 1,
						value: 1
					},
					{
						name: 2,
						value: 2
					}, {
						name: 3,
						value: 3
					}, {
						name: 4,
						value: 4
					}, {
						name: 5,
						value: 5
					}, {
						name: 6,
						value: 6
					}, {
						name: 7,
						value: 7
					}, {
						name: 8,
						value: 8
					}, {
						name: 9,
						value: 9
					}, {
						name: '退格',
						value: 10
					}, {
						name: 0,
						value: 0
					}, {
						name: '清除',
						value: 11
					}
				],
				//添加金额
				addNumber: '',
				tipText:'',
				timeOut:''
			}

		},
		methods: {
			ReckonTime() {},
			//前往选择支付方式
			gotoChosePay() {
				this.$router.push({
					name: 'mzChosePay'
				})
			},
			clickNumBerItem(item, index) {
				this.addNumber = item.value.toString();
				this.clearClicNumber();
				this.numberList[index].isClick = true;
			},
			//点击小键盘
			clickNumber(item) {
				if (item.value < 10) {
					this.addNumber += (item.value).toString();
				}
				//退格
				else if (item.value == 10) {
					let str = this.addNumber;
					this.addNumber = str.slice(0, str.length - 1)
				} //清楚
				else if (item.value == 11) {
					this.addNumber = "";
				}
				this.clearClicNumber();
			},
			//清空充值金额点击
			clearClicNumber() {
				let list = this.numberList;
				for (let item of list) {
					item.isClick = false;
				}
				this.numberList = list;
			},
			//前往选择支付方式页面
			makeSure() {
				if (this.addNumber == '') {
					this.tipText = "充值金额不能为空！";
					this.timeOut = setTimeout(()=>{
						this.tipText = "";
						clearTimeout(this.timeOut);
					},2000)
					return;
				}
					
				if(this.$store.state.user.userinfo.admissionTimes == ''){
					this.tipText = "查不到该病人住院信息，禁止充值！";
					this.timeOut = setTimeout(()=>{
						this.tipText = "";
					},2000)
					return;
				}
				let data = {
					amount: this.addNumber ? this.addNumber : 0,
					patientId: this.$store.state.user.userinfo.patientId
				}
				this.$store.dispatch("recipel/updateRecordsInfo", data); //存储缴费订单信息 -- 没有订单ID
				console.log(this.$store.state.recipel.records, '存储缴费订单')
				this.$router.push({
					name: 'mzcz',
					query: {
						title: "住院充值",
						code: 'yjjcz'
					}
				})
			},
			closeYinying(){
				this.tipText = "";
				clearTimeout(this.timeOut);
			},
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			console.log(this.$store.state)
		}
	};
</script>
<style scoped>
	.choseItemBox {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30px;
		width: 100%;
	}

	.NumbersBox {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 30px;
		padding-rigth: 30px;
	}

	.Item {
		margin: 10px;
		width: 31%;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		display: flex;
		background: #FFFFFF;
		/*实现垂直居中*/
		align-items: center;
	}

	.ItemText {
		padding: 22px 13px 22px 13px;
		width: 100%;
		text-align: center;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.topBox {
		display: flex;
		justify-content: space-around;
	}

	.nameDiv {
		font-size: 3vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		line-height: 48px;
	}

	.doctorTypeDiv {
		font-size: 2.5vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A1ADBB;
		line-height: 48px;
	}

	.left {
		width: 100%;
	}

	.right {
		width: 50%;
		justify-content: flex-end;
	}

	.patientName {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.fontSmall {
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.texalignL {
		text-align: left;
	}

	.texalignR {
		text-align: right;
	}



	.flex {
		display: flex;
	}

	.full {
		width: 100%;
		height: 83%;
		margin-top: 2.5%;
	}

	.CenterBox {
		margin-top: 45PX;
		color: #435C7A;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.blue {
		color: #57A8FF;
	}

	.mrR {
		margin-right: 722px;
	}

	.BtnText {
		text-align: center;
		width: 132px;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}


	.homeBtn {
		margin-left: 30px;
	}

	.keyBodBox {
		margin-top: 90px;
		margin-bottom: 80px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 6px;
		padding: 25px;
		padding-left: 50px;
		padding-right: 50px;
	}

	.numberBox {
		width: 100%;
		height: 50%;
		display: flex;
		flex-wrap: wrap;
	}

	.numberBoxItem {
		width: 25%;
		background: #FFFFFF;
		margin-right: 5%;
		height: 35%;
		border: 2px solid #46C349 !important;
		border-radius: 6px;
		display: flex;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #46C349;
		font-size: 32px;
		align-items: center;
		justify-content: center;
		line-height: 0px;
		padding: 0px;
	}
	.numberBoxItem:active{
		color: #FFFFFF;
		background: #46C349;
		border-radius: 6px;
	}

	.inputStyle {
		width: 80%;
		height: 4.375rem;
		background: #EDF2F5;
		border-radius: 8px;
		border: none;
		padding: 10px;
		margin-top: 20px;
		text-align: left;
		font-size: 26px;
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		padding-left: 15px;
	}

	.number {
		background: #57A8FF;
		border-radius: 6px;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		margin: 5%;
		margin-left: 0;
		margin-right: 5%;
		width: 24%;
		height: 3.4375rem;
		margin-top: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.click {
		color: #FFFFFF;
		background: #46C349;
	}



	.successBox {
		width: 150px;
		height: 139px;
		margin-top: 50px;

	}

	.itemIitle {
		width: 100%;
		text-align: center;
		font-size: 3.3vw;
		margin-top: 10px;
	}

	input::-webkit-input-placeholder {
		/*WebKit browsers*/
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A1ADBB;

	}

	input::-moz-input-placeholder {
		/*Mozilla Firefox*/

		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A1ADBB;

	}

	input::-ms-input-placeholder {
		/*Internet Explorer*/
		font-size: 28px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A1ADBB;
	}
</style>

<style>
	.zycz .el-button+.el-button {
		margin-left: 0px !important;
	}
</style>
